<template>
  <div class="main">
    <header>
    </header>
    <section class="content">
      <div class="contentLeft">
        <div class="myStation">
          <div class="frontTitle" style="width:90%;position: relative">
            <span>我的站点环境</span>
            <hr/>
          </div>
          <div>
            <div id="focus">
              <ul class="focusUl" v-on:mouseover="stopPic" v-on:mouseout="showPic">
                <li v-for="(stationImage, imageIndex) in stationImages">
                  <img :src="getImgUrl(stationImage)" class="focusImage" width="200px">
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="contentRight">
        <div class="info" style="position:relative">
          <ul class="infoUl" style="position: absolute;top:10px;left:114px; width:210px;">
            <li><span>站点名：</span><span>{{station.stationname}}</span></li>
            <li><span>管理员姓名：</span><span>{{station.stationmanngernmae}}</span></li>
            <li><span>电话号码：</span><span>{{station.stationmanngertel}}</span></li>
            <li><span>站点号：</span><span>{{station.stationnum}}</span></li>
          </ul>
        </div>
        <div class="myTeachers">
          <div class="frontTitle" style="width:90%;position: relative">
<!--            <span>我的老师</span>-->
<!--            <hr/>-->
          </div>
        </div>
      </div>
    </section>
    <footer>

    </footer>

  </div>
</template>

<script>
import api from "../../../../axios/api"
import * as fecha from "element-ui/lib/utils/date";
import utilsFD from "../../../../static/js/utils/index.js"
import $ from "_jquery@2.2.4@jquery";
export default {
  name: "me",
  data(){
    return {
      station:{},
      pageInfo:{"pageSize":5,"currPage":1},
      currPage:1,
      stations:{},
      timer: {},
      showIndex: 0, //需要显示的图片的编号，默认第一张
      size: 0,
      width: 0,
      stationImages:[]
    }
  },
  methods:{
    //根据id查询管理员信息
    getStationById:function(){
      let _this = this;
      api.setDataFromAxios("/api/stationController/getStationById/" + this.station.sid,null,"get",null).then(
        //默认返回就是response对象
        dto=>{
          _this.station = dto.t;
          this.showPic();
          //处理图片字段的地址 变成对应的file 对象 el-upload才能匹配显示
          if(this.station.stationimage!=null&&this.station.stationimage!=''){
            this.oldImg = true;
            this.stationImages = this.station.stationimage.split(",");
            Array.prototype.push.apply(this.stationImages, this.stationImages);
          }
        }
      )
    },
    getImgUrl: function (imgsrc) {
      return "../../../../static/images/station/upload/station/" + imgsrc;
    },
    dateFormat(cellValue,pattern) {
      return utilsFD.FD.Fd().dateFormatCN(cellValue,pattern,fecha);
    },
    showPic: function () {//显示图片的方法 开启定时器
      this.timer = setInterval(() => {
        $('.focusUl').css("margin-left",(this.width * this.showIndex * -1) + 'px');
        console.log(this.width * this.showIndex * -1);
        this.showIndex++;
        if (this.showIndex == this.size - 4) {//如果下一张图片的索引等于了图片数量已经是最后一张回到第一张
          this.showIndex = 0
        }
      }, 1000)//每隔一秒执行切换
    },
    changePic(spanIndex) {
      //alert(spanIndex)
      this.showIndex = spanIndex;
      this.stopPic();
    },
    stopPic() {
      clearInterval(this.timer);
    }
  },
  created() {
    this.station.sid = "1009";
    this.getStationById();
  },
  watch: {//watch 用于监控当前页面的变量的值变化 如果直接调用方法是渲染前的界面，使用this.nextTick 中的方法才是渲染完成后调用
    stationImages:{
      handler(val, oldVal){
        this.$nextTick(function() {
          this.size = this.stationImages.length;
          // alert(this.size)
          this.width = $("#focus > ul > li > img:eq(0)").width();
          // alert($(".focusImage:eq(0)").width())
          $(".focusUl").width(this.size * this.width);//动态根据图片大小和数量设置ul宽度

        })

      },
      deep:true//打开深度监听
    },

  }
}
</script>

<style scoped lang="stylus">
div
  border solid 0px;
.main
  font-family "微软雅黑"
  width 1000px;
  height auto;
  margin 0 auto;
  header
    height 40px;
  .content
    width 1004px;
    height 100%
    div
      float left;
    .frontTitle
      margin 0;
      color: white
      font-size 12px;
      height 24px;
      text-align left;
      span
        text-align center;
        vertical-align center;
        background-color #009af3
        display inline-block;
        width 70px;
        height 18px;
        margin 2px 0 2px 6px;
        border-radius 4px 4px 0 0;
      hr
        border-top 0;
        border-bottom solid 1px  #009af3;
        margin 0 0 0 6px;
        position absolute;
        bottom 3px;
        width 90%


    .contentLeft
      width 690px;
      height 660px;
      div
        margin-top 6px;
        width 100%
      .myStation
        height 240px;
        .StationUl
          padding-left 40px;
          li
            list-style-type none
            text-align left
            span
              display inline-block
              text-align center
              &:nth-child(1)
                width 50px;
              &:nth-child(2)
                width 80px;
              &:nth-child(3)
                width 60px;
              &:nth-child(4)
                width 80px;
              &:nth-child(5)
                width 120px;
              &:nth-child(6)
                width 120px;
    .contentRight
      margin-left 10px
      width 300px;
      height 300px;
      div
        width 100%
      .info
        height 258px
        .photo
          width
        .infoUl
          margin 0
          padding 0
          li
            font-size 12px
            list-style-type none
            text-align left
            padding-left 4px
            span
              display inline-block
              height 26px
              &:nth-child(1)
                width 80px
    //  .myTeachers
    //    height  auto
  footer
    height 80px;
 #focus
    width:600px;
    overflow hidden;
    margin 0 auto;
    position relative;
    .focusUl
      margin 0
      padding 0
      li
        list-style-type none;
        float left;
        img
          width 200px;
          height 280px;
      &:after
        clear both
        content ''
        display block
</style>
